<template>
  <div class="mains">
    <div class="nav">
      <div>
        <button type="button" @click="changePdfPage(0)">上一页</button>
        <button type="button" @click="changePdfPage(1)">下一页</button>
      </div>
      <p>{{ currentPage }} / {{ pageCount }}</p>
      <div>
        <button type="button" @click="scaleD">放大</button>
        <button type="button" @click="scaleX">缩小</button>
      </div>
      <div>
        <button type="button" @click="clock">顺时针</button>
        <button type="button" @click="counterClock">逆时针</button>
        <button type="button" @click="downloadPDF">下载</button>
      </div>
    </div>

    <div class="body">
      <pdf
        ref="pdf"
        :src="srcUrl"
        :page="currentPage"
        :rotate="pageRotate"
        @num-pages="pageCount = $event"
        @page-loaded="currentPage = $event"
        @loaded="loadPdfHandler"
      ></pdf>
    </div>
  </div>
</template>

<script>
// pdf预览
import pdf from 'vue-pdf';
import FileSave from 'file-saver';
export default {
  name: 'home',
  components: {
    pdf,
  },
  data() {
    return {
      // srcUrl: '/to/public_assets/xuetangx/PDF/PlayerAPI_v1.0.6.pdf',
      srcUrl: 'https://soft.xiaoz.org/office/hee%20hee.pdf',
      currentPage: 0, // pdf文件页码
      pageCount: 0, // pdf文件总页数
      scale: 40,
      pageRotate: 0, //旋转
    };
  },

  mounted() {
    this.$refs.pdf.$el.style.width = parseInt(this.scale) + '%';
  },
  methods: {
    // pdf加载时
    loadPdfHandler(e) {
      e;
      this.currentPage = 1; // 加载的时候先加载第一页
    },
    // 改变PDF页码,val传过来区分上一页下一页的值,0上一页,1下一页
    changePdfPage(val) {
      if (val === 0 && this.currentPage > 1) {
        this.currentPage--;
      }
      if (val === 1 && this.currentPage < this.pageCount) {
        this.currentPage++;
      }
    },
    //放大
    scaleD() {
      this.scale += 5;
      this.$refs.pdf.$el.style.width = parseInt(this.scale) + '%';
    },
    //缩小
    scaleX() {
      if (this.scale != 0) {
        this.scale += -5;
        console.log(this.scale);
        this.$refs.pdf.$el.style.width = parseInt(this.scale) + '%';
      }
    },
    // 顺时针
    clock() {
      this.pageRotate += 90;
    },
    // 逆时针
    counterClock() {
      this.pageRotate -= 90;
    },

    downloadPDF() {
      const filename = '测试.pdf';
      const url = this.srcUrl;
      //异步申请文件流
      this.$Axios
        .get(url, {
          headers: {
            'Content-Type': 'application/octet-stream',
          },
          responseType: 'blob',
        })
        .then((res) => {
          let file = new Blob([res.data], {
            type: 'application/pdf;charset=utf-8',
          });
          //直接下载而不预览
          FileSave.saveAs(file, filename);
        });
    },
  },
};
</script>

<style scoped  lang="less">
.mains {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  margin: 0 auto;
  border: 2px solid #409eff;
  padding: 20px;
  .nav {
    display: flex;
    justify-content: center;
    margin-bottom: 5px;
    height: 30px;
    button {
      margin: 0px 3px;
    }
  }
  .body {
    display: flex;
    justify-content: center;
    align-items: center;
    overflow-y: scroll;
    height: calc(100% - 30px);
  }
}
</style>